<template>
	<div class="container">
		<el-page-header @back="goBack" content="提现申请流水"></el-page-header>

		<el-radio-group v-model="dataType" class="e-m-t-45">
			<el-radio-button label="0">提现申请审核</el-radio-button>
			<el-radio-button label="1">提现流水</el-radio-button>
		</el-radio-group>

		<el-row type="flex" justify="space-between" class="nav-bar">
			<el-col :span="3">
				<el-button type="primary" @click="downloadwithdrawa" plain><i class="iconfont icon-excel e-m-r-5"></i>导出Excel</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
						<el-form-item label="时间筛选">
						<el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1"
							type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<!-- <div class="type-state e-m-b-30">
			<span v-for="(item,index) in statusArr" :key="index" :class="{'on':status == item.value}"
				@click="status=item.value">{{item.name}}</span>
		</div> -->

		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed prop="number" label="提现申请表编号" width="200">
			</el-table-column>
			<el-table-column prop="billdetailnumber" label="流水编号">
			</el-table-column>
			<el-table-column prop="paymentno" label="付款单号">
				<template slot-scope="scope">
					<span  v-if="!scope.row.paymentno">--</span>
					<span  v-if="scope.row.paymentno ">{{scope.row.paymentno  }}</span>

				</template>
			</el-table-column>
			<el-table-column prop="username" label="用户类型" width="100">
			</el-table-column>
			<el-table-column prop="usertype" label="用户类型" width="100">
			</el-table-column>
            <el-table-column prop="way" label="申请提现类型" width="120">
			</el-table-column>
			<el-table-column prop="amount" label="提现金额（元）" width="150">
			</el-table-column>
			<el-table-column prop="createdate" label="创建时间" width="150">
			</el-table-column>
			<el-table-column prop="state" label="状态" width="150">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '4'">已到账</span>
					<span class="color-warning" v-if="scope.row.state == '1'">待审核</span>
					<span class="color-danger" v-if="scope.row.state == '2'" :title="scope.row.reason">已驳回</span>
					<span class="color-danger" v-if="scope.row.state == '5'" :title="scope.row.reason">打款出错</span>
					<span class="color-success" v-if="scope.row.state == '3'">已审核</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="300">
				<template slot-scope="scope">
					<el-button @click="views(scope.row)" type="text" size="small">查看</el-button>
					<template v-if="scope.row.way == '微信'">
						<el-button @click="checkPayment(scope.row.id)" type="text" size="small">查询微信打款状态</el-button>
						<el-popconfirm
							title="请选择打款方式"
							confirm-button-text="微信打款"
							cancel-button-text="线下打款"
							@confirm="weixinPayment(scope.row)"
							@cancel="againPayment(scope.row)"
							>
							<el-button slot="reference" type="text" size="small" v-if="scope.row.state != '4'">打款</el-button>
						</el-popconfirm>
					</template>
					<template v-else>
						<el-button v-if="scope.row.state != '4'" @click="againPayment(scope.row)" type="text" size="small">打款</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>

		<el-dialog title="线下打款" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm" :rules="rules">
				<el-form-item label="银行开户行" prop="bankopenname">
					<el-input v-model="form.bankopenname"></el-input>
				</el-form-item>
				<el-form-item label="银行账号" prop="bankaccount">
					<el-input v-model="form.bankaccount"></el-input>
				</el-form-item>
				<el-form-item label="银行户名" prop="bankname">
					<el-input v-model="form.bankname"></el-input>
				</el-form-item>
				<el-form-item label="结算账户" prop="payway">
					<el-select v-model="form.accountid" placeholder="请选择">
						<el-option v-for="item in paywayList" :key="item.id" :label="item.accountnumber" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="流水账号" prop="paymentno">
					<el-input v-model="form.paymentno"></el-input>
				</el-form-item>
				<el-form-item label="转账凭证">
					<cropper-upload :zoomScale='[1,1]' :isCropper="false" @getUpload="handleFilesSuccess" class="avatar-uploader">
						<img v-if="form.picvoucher" :src="fileURL + form.picvoucher" class="avatar">
						<div class="avatar-uploader-icon" v-else>
							<div><i class="el-icon-plus"></i></div>
							<div class="e-font-14">上传图片</div>
						</div>
					</cropper-upload>
					<!-- <div class="tips e-p-t-10">建议上传尺寸比例为600*600 </div> -->
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="examineSubmit">确定</el-button>
			</span>
		</el-dialog>
		<!-- 查看详情 -->
		<el-dialog title="查看详情" :visible.sync="dialogVisible2" width="1200px">
			<h3>基本信息</h3>
			<el-descriptions :column="2" border :labelStyle="{width:'150px'}">
				<el-descriptions-item label="提现申请编号">
					{{userForm.number}}
				</el-descriptions-item>
				<el-descriptions-item label="流水编号">
					{{userForm.billdetailnumber}}
				</el-descriptions-item>
				<el-descriptions-item label="提现方式">
					{{userForm.way}}
				</el-descriptions-item>
				<el-descriptions-item label="提现金额">
					{{userForm.amount}}元
				</el-descriptions-item>
				<el-descriptions-item label="申请人">
					{{userForm.username}}
				</el-descriptions-item>
				<el-descriptions-item label="申请时间">
					{{userForm.createdate}}
				</el-descriptions-item>
				<el-descriptions-item label="用户类型">
					{{userForm.usertype}}
				</el-descriptions-item>
				<el-descriptions-item label="审核状态"> 
					<span class="color-success" v-if="userForm.state == '已到账'">{{userForm.state}}</span>
					<span class="color-warning" v-if="userForm.state == '待审核'">{{userForm.state}}</span>
					<span class="color-danger" v-if="userForm.state == '已驳回'" :title="userForm.reason">{{userForm.state}}</span>
					<span class="color-danger" v-if="userForm.state == '打款出错'" :title="userForm.reason">{{userForm.state}}</span>
					<span class="color-danger" v-if="userForm.state == '已审核'">{{userForm.state}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="审核时间">
					{{userForm.examinedate}}
				</el-descriptions-item>
				<el-descriptions-item label="审核人">
					{{userForm.examinename}}
				</el-descriptions-item>
			</el-descriptions>
			<h3>打款信息</h3>
			<el-descriptions :column="2" border :labelStyle="{width:'150px'}">
				<el-descriptions-item label="打款流水编号">
					{{userForm.paymentno}}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号类型">
					{{userForm.payway}}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号">
					{{userForm.accountnumber}}
				</el-descriptions-item>
			</el-descriptions>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
		return {
			title: '提现申请流水列表' 
		}
	},
	data() {
		return {
			timeType: 0,//时间类型
			loading: true,
			value1: "",//下单时间
			starteate: "",//下单初始
			enddate: "",//下单结束
			dataType: 1,
			key: '',
			page: 1,
			pageSize: 10,
			status: 2,
			statusArr: [
				{
					name: '出库核算列表',
					value: 1
				},
				{
					name: '提现申请流水',
					value: 2
				}
			],
			loading: false,
			total: 0,
			dialogVisible: false,
			form: {
				id: '',
				status: 1, //0微信提现，1线下提现
				accountid: '',  // 账户类型id
				picvoucher: '', // 资料图片
        		paymentno: '', //流水
				bankname: "", //银行户名
				bankaccount: "", //银行账号
				bankopenname: "", //银行开户行
			},
			rules: {

			},
			paywayList: [],
			tableData: [],
			dialogVisible2: false,
			userForm: {}
		}
	},
	watch: {
		dialogVisible(value) {
			if (!value) {
				this.form = {
					id: '',
					way: "微信", //0微信，1线下打款,2.银行
					accountid: '',  // 账户类型id
					picvoucher: '', // 资料图片
					paymentno: '', //流水
					bankname: "", //银行户名
					bankaccount: "", //银行账号
					bankopenname: "", //银行开户行
				}
			}
		},
		status(value) {
			if(value == 1){
				this.$router.push({
					path:'/finance/list'
				})
			}else{
				this.$router.push({
					path:'/finance/withdrawList'
				})
			}
		},
		dataType(val){
			if(val == 0){
				this.$router.push({
					path:'/withdrawal/list'
				})
			}else{
				this.$router.push({
					path:'/finance/withdrawList'
				})
			}
		}
	},
	mounted() {
		this.getList()
		this.getpaywayList()
	},
	methods: {
		downloadwithdrawa() {
			let api = '/Admin/Finance/WithdrawListDownload'
			this.$axios.post(api, {
				"request": {
					"pageIndex": this.page,
					"pageSize": 0,
					"offset": 0,
					"key": "",
					"timeType": 1,
					"startDate": this.startdate,
					"endDate": this.enddate,
					// "state": this.state,
					"packStationId": 0,
					// "OrderType": this.Ordertype,
					"timeType": this.timeType
				},
				"fields": [
					{
						"e": "number",
						"c": "提现申请表编号"
					},
					{
						"e": "billdetailnumber",
						"c": "流水编号"
					},
					{
						"e": "paymentno",
						"c": "付款单号"
					},
					{
						"e": "usertype",
						"c": "用户类型"
					},
					{
						"e": "way",
						"c": "申请提现类型"
					},
					{
						"e": "amount",
						"c": "申请金额"
					},
					{
						"e": "createdate",
						"c": "创建时间"
					},
					{
						"e": "state",
						"c": "状态"
					}
				]

			}, {
				responseType: 'blob'
			}).then(res => {
				console.log(res)
				let content = res;
				let fileName = '提现流水.xls'
				this.utils.saveAndExport(content, fileName)
			})
		},
		time(e) {
			console.log(e)
			this.startdate = e[0]
			this.enddate = e[1]
			this.timeType = 4

		},
		goBack() {
			this.$router.go(-1)
		},
		handleFilesSuccess(res, file) {
            if (file.status === "success") {
                this.loading = false
                this.form.picvoucher = res.path
            }
        },
		getpaywayList(){
			this.$axios.post('/Operator/Account/List',{
				"PageIndex": 1,
				"PageSize": 999,
			}).then((res)=>{
				this.paywayList = res.rows
			})
		},
		getList() {
			this.loading = true
			this.$axios.post('/WithdrawApply/List', {
				"PageIndex": this.page,
				"PageSize": this.pageSize,
				"Key": this.key,
				"timeType": this.timeType,
				"startDate": this.startdate,
				"endDate": this.enddate,
				"state": ['已审核','已到账','打款出错'], //null全部 1待审核 2已驳回 3已审核 4已到账 5打款出错
			}).then((res) => {
				this.tableData = res.rows;
				this.total = res.total;
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		search() {
			this.getList()
		},
		pageChange(e) { // 页码切换事件
			this.page = e;
			this.getList()
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getList()
		},
        againPayment(row) {
			this.form.id = row.id
			// this.form.way = row.way;
			this.form.way = '线下打款';
			this.form.bankname = row.bankname //银行户名
			this.form.bankaccount = row.bankaccount //银行账号
			this.form.bankopenname = row.bankopenname //银行开户行
			this.dialogVisible = true
		},
		examineSubmit(){
			this.$confirm('请确认填写的资料无误?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.post('/WithdrawApply/Pay',this.form).then((res) => {
					this.$message.success('提交成功');
					this.dialogVisible = false
					this.getList()
				})
			})
		},
		weixinPayment(row){
			this.$axios.post('/WithdrawApply/Pay',{
				id: row.id,
				way: '微信'
			}).then((res) => {
				this.$message.success('提交成功');
				this.getList()
			})
		},
		checkPayment(id) {
			this.$axios.get('/WithdrawApply/CheckWXState?id='+id).then((res) => {
				if(res.msg == "打款失败"){
				this.$message.error(res.msg);
				}else{
				this.$message.success(res.msg);

				}
				this.getList()
			})
		},
		views(row){
			console.log(row)
			this.userForm = row
			this.dialogVisible2 = true
		},
	}
}
</script>

<style lang="scss">
.nav-bar {
	padding: 45px 0 0;
}

.send {
	margin-top: 15px;
	margin-right: 10px;
}

.dialogForm {
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 50%;
		float: left;

		&.all {
			width: 100%;
		}

		.el-select {
			width: 100%;
		}
	}
}
</style>
